<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2509195_fgiacagaiqp.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <ul class="rotation">
            <li style="display: block;"><img src="img/Genshin (1).JPG" alt=""></li>
            <li><img src="img/Genshin (2).JPG" alt=""></li>
            <li><img src="img/Genshin (3).JPG" alt=""></li>
            <li><img src="img/Genshin (4).JPG" alt=""></li>
            <li><img src="img/Genshin (5).JPG" alt=""></li>
            <li><img src="img/Genshin (6).JPG" alt=""></li>
            <li><img src="img/Genshin (7).JPG" alt=""></li>
            <li><img src="img/Genshin (8).JPG" alt=""></li>
            <li><img src="img/Genshin (9).JPG" alt=""></li>
            <li><img src="img/Genshin (10).JPG" alt=""></li>
            <li><img src="img/Genshin (11).JPG" alt=""></li>
        </ul>
        <div class="pre btn iconfont icon-fanhui"></div>
        <div class="next btn iconfont icon-gengduo"></div>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/tools.js"></script>
    <script>
        //分别获取到rotation下的li，和nav下的li的集合
        const lis = document.querySelectorAll('.rotation li')
        const navItems = document.querySelectorAll('.nav li')
        const btns=document.querySelectorAll('.container .btn')
        //currentIndex代表当前正在显示的图片的索引，nextIndex代表下一张即将显示的图片的索引
        let currentIndex = 0,
            nextIndex = 1
        //将切换效果封装成函数
        function change(){
            //调用淡出函数，淡出时长为1秒
            fadeOut(lis[currentIndex], 600)
            //lis[currentIndex].style.display='none'
            //调用淡入函数，淡入时长为1秒
            fadeIn(lis[nextIndex], 600)
            //lis[nextIndex].style.display='block'
            //调整导航小按钮的状态为当前显示的图片
            navItems[currentIndex].className = ''
            navItems[nextIndex].className = 'active'
            //修改索引的值
            currentIndex = nextIndex
            nextIndex += 1
            if (nextIndex > lis.length - 1) {
                nextIndex = 0
            }
        }
        //每隔3秒自动轮播
        let timer = setInterval(change, 3000)
        //鼠标移入停止轮播
        document.querySelector('.container').addEventListener('mouseenter',function(e){
            //关闭定时器
            clearInterval(timer)
            //鼠标移入显示按钮
            btns.forEach(function(items){
                items.style.display='block'
            })
        },false)
        //鼠标移出继续轮播
        document.querySelector('.container').addEventListener('mouseleave',function(e){
            //重新启动定时器
            timer = setInterval(change, 3000)
            //鼠标移出隐藏按钮
            btns.forEach(function(items){
                items.style.display='none'
            })
        },false)
        //鼠标点击按钮事件
        document.querySelector('.container').addEventListener('click', function (e) {
            //当事件源的类名包含pre时触发点击事件，发生切换到上一张图片的效果
            if (e.target.classList.contains('pre')) {
                nextIndex=currentIndex-1
                if(nextIndex<0){
                    nextIndex=lis.length-1
                }
                change()
            }
            //当事件源的类名包含next时触发点击事件，发生切换到下一张图片的效果
            else if (e.target.classList.contains('next')) {
                change()
            }
        }, false)
        //利用事件委托给轮播导航的每一个按钮绑定鼠标移入事件，这里的鼠标移入事件只能使用mouseover
        //不能使用mouseenter，因为mouseover具有事件冒泡，mouseenter没有事件冒泡
        document.querySelector('.container .nav').addEventListener('mouseover',function(e){
            if(e.target.nodeName==='LI'){
                nextIndex=Array.from(navItems).findIndex(function(curr){
                    return curr===e.target
                })
                change()
            }
        },false)
        //给轮播导航每一个按钮绑定鼠标移入事件的另一种方式
        /* for(let i=0;i<navItems.length;i++){
            navItems[i].onmouseenter=function(){
                nextIndex=i
                change()
            }
        } */
    </script>
</body>

</html>